﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>별점모듈</title>
<link type="text/css" rel="stylesheet" href="css/module_star.css" />
<script type="text/javascript" src="js/cygem_starscoring.js"></script>
</head>
<body>
<div class="wrapper">
	<h1>별점 모듈 - 기본형</h1>
	<div class="sp_module point00">
		<div class="sp_rate">
			<select>
				<option value="00" selected="selected">00점</option>
				<option value="01">01점</option>
				<option value="02">02점</option>
				<option value="03">03점</option>
				<option value="04">04점</option>
				<option value="05">05점</option>
				<option value="06">06점</option>
				<option value="07">07점</option>
				<option value="08">08점</option>
				<option value="09">09점</option>
				<option value="10">10점</option>
			</select>
			<span class="ico"></span>
		</div>(00점)
		<div class="tooltip">
			<div class="sp_rate"><span class="ico"></span></div>(05/10)
		</div>
	</div>
	<div class="sp_module point01">
		<div class="sp_rate">
			<select>
				<option value="00">00점</option>
				<option value="01" selected="selected">01점</option>
				<option value="02">02점</option>
				<option value="03">03점</option>
				<option value="04">04점</option>
				<option value="05">05점</option>
				<option value="06">06점</option>
				<option value="07">07점</option>
				<option value="08">08점</option>
				<option value="09">09점</option>
				<option value="10">10점</option>
			</select>
			<span class="ico"></span>
		</div>(01점)
		<div class="tooltip">
			<div class="sp_rate"><span class="ico"></span></div>(05/10)
		</div>
	</div>
	<div class="sp_module point02">
		<div class="sp_rate">
			<select>
				<option value="00">00점</option>
				<option value="01">01점</option>
				<option value="02" selected="selected">02점</option>
				<option value="03">03점</option>
				<option value="04">04점</option>
				<option value="05">05점</option>
				<option value="06">06점</option>
				<option value="07">07점</option>
				<option value="08">08점</option>
				<option value="09">09점</option>
				<option value="10">10점</option>
			</select>
			<span class="ico"></span>
		</div>(02점)
		<div class="tooltip">
			<div class="sp_rate"><span class="ico"></span></div>(05/10)
		</div>
	</div>
	<div class="sp_module point03">
		<div class="sp_rate">
			<select>
				<option value="00">00점</option>
				<option value="01">01점</option>
				<option value="02">02점</option>
				<option value="03" selected="selected">03점</option>
				<option value="04">04점</option>
				<option value="05">05점</option>
				<option value="06">06점</option>
				<option value="07">07점</option>
				<option value="08">08점</option>
				<option value="09">09점</option>
				<option value="10">10점</option>
			</select>
			<span class="ico"></span>
		</div>(03점)
		<div class="tooltip">
			<div class="sp_rate"><span class="ico"></span></div>(05/10)
		</div>
	</div>
	<div class="sp_module point04">
		<div class="sp_rate">
			<select>
				<option value="00">00점</option>
				<option value="01">01점</option>
				<option value="02">02점</option>
				<option value="03">03점</option>
				<option value="04" selected="selected">04점</option>
				<option value="05">05점</option>
				<option value="06">06점</option>
				<option value="07">07점</option>
				<option value="08">08점</option>
				<option value="09">09점</option>
				<option value="10">10점</option>
			</select>
			<span class="ico"></span>
		</div>(04점)
		<div class="tooltip">
			<div class="sp_rate"><span class="ico"></span></div>(05/10)
		</div>
	</div>
	<div class="sp_module point05">
		<div class="sp_rate">
			<select>
				<option value="00">00점</option>
				<option value="01">01점</option>
				<option value="02">02점</option>
				<option value="03">03점</option>
				<option value="04">04점</option>
				<option value="05" selected="selected">05점</option>
				<option value="06">06점</option>
				<option value="07">07점</option>
				<option value="08">08점</option>
				<option value="09">09점</option>
				<option value="10">10점</option>
			</select>
			<span class="ico"></span>
		</div>(05점)
		<div class="tooltip">
			<div class="sp_rate"><span class="ico"></span></div>(05/10)
		</div>
	</div>
	
	<h1>별점 모듈 - 터치 디바이스형(Only Webkit-Based Browser)</h1>
	<div style="margin-bottom:100px;"></div>
	<div class="sp_module point05">
		<div class="sp_rate">
			<select>
				<option value="00">00점</option>
				<option value="01">01점</option>
				<option value="02">02점</option>
				<option value="03">03점</option>
				<option value="04">04점</option>
				<option value="05" selected="selected">05점</option>
				<option value="06">06점</option>
				<option value="07">07점</option>
				<option value="08">08점</option>
				<option value="09">09점</option>
				<option value="10">10점</option>
			</select>
			<span class="ico"></span>
		</div>(05점)
		<div class="tooltip" style="display:block !important;">
			<div class="sp_rate"><span class="ico"></span></div>(05/10)
		</div>
	</div>

	<h1>Usage</h1>
	<ul>
		<li><strong>설정해야 할 요소는 다음과 같습니다.</strong></li>
		<li>별모양 전체 넓이<em>(4line - width:60px)</em></li>
		<li>회색별 sprite img 위치<em>(4line - background:0 -59px)</em></li>
		<li>노란별 sprite img 위치<em>(6line - background:0 -45px)</em></li>
		<li>말풍선의 별모양 전체 넓이<em>(61line - width:100px))</em></li>
		<li>말풍선의 회색별 sprite img 위치<em>(61line - background-position:0 -20px)</em></li>
		<li>말풍선의 노란별 sprite img 위치<em>(62line - background-position:0 0)</em></li>
	</ul>

	<h1>Image</h1>
	<img src="img/set_ico_star.gif" style="padding:10px; border:1px solid #e1e1e1;" />
	
	<h1>CSS Code</h1>
	<pre class="brush:css; highlight: [4, 6, 61, 62];">
		/* star point module */
		.sp_module { position:relative; font-size:11px; color:#4BC2FF; z-index:99999; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
		.sp_module select { display:none; }
		.sp_module .sp_rate { position:relative; top:1px; display:inline-block; width:60px; height:11px; margin-right:5px; background:url('../img/set_ico_star.gif') no-repeat 0 -59px; }
		html*.sp_module .sp_rate { display:inline; zoom:1; } /* ie6,7 hack */
		.sp_module .sp_rate .ico { position:absolute; top:0; left:0; height:100%; margin-right:5px; background:url('../img/set_ico_star.gif') no-repeat 0 -45px; }
		.sp_module.point00 .sp_rate .ico { width:0; }
		.sp_module.point01 .sp_rate .ico { width:10%; }
		.sp_module.point02 .sp_rate .ico { width:20%; }
		.sp_module.point03 .sp_rate .ico { width:30%; }
		.sp_module.point04 .sp_rate .ico { width:40%; }
		.sp_module.point05 .sp_rate .ico { width:50%; }
		.sp_module.point06 .sp_rate .ico { width:60%; }
		.sp_module.point07 .sp_rate .ico { width:70%; }
		.sp_module.point08 .sp_rate .ico { width:80%; }
		.sp_module.point09 .sp_rate .ico { width:90%; }
		.sp_module.point10 .sp_rate .ico { width:100%; }
		
		/* tooltip */
		.sp_module .tooltip {
			display:none;
			position:absolute; 
			top:-75px; 
			left:-20px;
			padding:20px 15px;
			font-size:14px; 
			font-weight:bold;
			white-space:nowrap;
			color:#4BC2FF; 
			border:1px solid #D2D2D2;
			-webkit-border-radius: 10px;
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0.20, rgb(255,255,255)), color-stop(0.90, rgb(247,247,247)), color-stop(1, rgb(255,255,255)));
			-webkit-box-shadow: 1px 1px 0 rgba(0,0,0,0.1);
		}
		
		.sp_module .tooltip:before {
			content:" ";
			position:absolute;
			bottom:-9px;
			left:21px;
			width:0;
			height:0;
			border-style:solid;
			border-width:9px 7px 0 0;
			border-color:#FFF transparent transparent;
			z-index:10;
		} /* tooltip triangle tail */
		
		.sp_module .tooltip:after {
			content:" ";
			position:absolute;
			bottom:-12px;
			left:20px;
			width:0;
			height:0;
			border-style:solid;
			border-width:12px 11px 0 0;
			border-color:#D2D2D2 transparent transparent;
			z-index:9;
		} /* tooltip triangle tail */
		.sp_module .tooltip .sp_rate { top:3px; width:100px; height:19px; margin-right:10px; background-position:0 -20px; }
		.sp_module .tooltip .sp_rate .ico { height:100%; background-position:0 0; }
	</pre>
		
</div>
<!-- Syntax Highlighter 별점모듈과 상관없음 -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>  
<script type="text/javascript">
		SyntaxHighlighter.defaults['toolbar'] = false;
		SyntaxHighlighter.config.tagName = "pre";
		SyntaxHighlighter.all();
</script>
<style type="text/css">
/* 이 스타일은 별점모듈과 상관 없습니다. */
ul { padding-left:20px; line-height:1.5em; }
ul li em { padding-left:5px; color:#999; font-style:normal; }
</style>
<!-- //Syntax Highlighter -->
</body>
</html>

